<template>
  <div class="searchProject">
    <!-- 搜索项目searchProject -->
    <header>
      <div class="search_ipt">
        <input type="text" placeholder="埋线提升" />
      </div>
      <router-link :to="{ name: 'Home' }">取消</router-link>
    </header>
    <main>
      <div class="lately_search">
        <h4>最近搜索</h4>
        <p>埋线提升</p>
      </div>
      <div class="hot_search">
        <h4>热门搜索</h4>
        <ul>
          <li>瘦脸针</li>
          <li>钜惠加</li>
          <li>热玛吉</li>
          <li>腋下脱毛</li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.searchProject {
  font-size: 30px;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 0 20px;
    .search_ipt {
      width: 600px;
      height: 60px;
      border: 1px solid #ddd;
      border-radius: 30px;
      padding: 10px 0 0px 20px;

      input {
        outline: none;
        border: none;
      }
    }
  }
  main {
    padding-left: 30px;
    .lately_search {
      margin-top: 20px;
      p {
        width: 160px;
        height: 50px;
        text-align: center;
        margin-top: 20px;
        line-height: 50px;
        border-radius: 25px;
        background-color: #ddd;
        margin-left: 10px;
      }
    }
    .hot_search {
      margin-top: 30px;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          margin-top: 25px;
          width: 160px;
          height: 50px;
          background-color: #ddd;
          text-align: center;
          border-radius: 25px;
          line-height: 50px;
        }
      }
    }
  }
}
</style>